import React from 'react'

export default class Count extends React.Component {
  constructor() {
    super()
    // 在构造器中this就代表组件实例
    // this.xxx = 1 //也是私有数据,但是不能被称之为状态.
    // 注意: 一般如果有一个数据和页面渲染有关系,则这个数据必须要存储在状态里面,应该如果不是状态数据,则数据发生变化是无法让页面更新的
    this.state = {
      //状态对象里面的属性就可以随便写
      count: 1,
      msg: 'hello',
    } // 在react类组件中,只有私有的state属性的值才被称之为状态
  }
  render() {
    console.log('render调用了')
    // 在render函数中this也是当前组件实例
    return (
      <div>
        <p>{this.state.count}</p>
        <p>{this.state.msg}</p>
        <button
          onClick={() => {
            // this.xxx = this.xxx + 1
            // console.log(this.xxx)
            //千万不要直接修改state的值 this.state.count = this.state.count + 1
            // this.state.count = this.state.count + 1
            // console.log(this.state.count)
            // 应该使用的方式:
            this.setState({
              // 键: 就是要修改的属性
              // 键对应的值: 就是目标值
              count: ++this.state.count,
            })
            // console.log(this.state.count)

            // this.setState的作用: 1. 修改state数据 2. 更新组件(其实就是将数据修改完毕之后,让render函数重新执行)
            // 注意: this.setState修改数据的行为是异步的
          }}
        >
          +
        </button>
      </div>
    )
  }
}
